<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import { yonghu } from '@/api/tjbb/yhtj.js';
import * as echarts from 'echarts';

export default {
  name: 'DocumentsUser',

  data() {
    return {
      sj: [],
      datax: [],
      datay: []
    };
  },

  async mounted() {
    try {
      // 等待 getList 方法的数据获取和处理完成
      await this.getList();
      // 数据处理完成后调用 show 方法渲染图表
      this.show();
    } catch (error) {
      console.error('数据获取或处理出错:', error);
    }
  },

  methods: {
    getList() {
      return new Promise((resolve, reject) => {
        yonghu()
          .then((res) => {
            console.log(res);
            this.sj = res.data.rows;
            console.log(this.sj);
            // 修正变量作用域，使用 this 引用组件实例的数据
            for (let i = 0; i < this.sj.length; i++) {
              this.datax.push(this.sj[i].day);
              this.datay.push(this.sj[i].users);
            }
            // 数据处理完成，resolve Promise
            resolve();
          })
          .catch((error) => {
            console.error('获取数据失败:', error);
            // 发生错误，reject Promise
            reject(error);
          });
      });
    },
    show() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return `${params[0].axisValue}<br/>用户增长数: ${params[0].data}`;
          }
        },
        legend: {
          data: ['用户订单量']
        },
        xAxis: {
          type: 'category',
          data: this.datax
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '用户订单量',
            data: this.datay,
            type: 'bar'
          }
        ]
      };

      if (option) {
        myChart.setOption(option);
      }
    }
  }
};
</script>

<style>
#main {
  height: 440px;
}
</style>